<template>
  <div>
    <SettingItem name="题目名称">
      <n-input
        type="textarea"
        size="small"
        v-model:value="data.props.questionName"
      ></n-input>
    </SettingItem>
    <SettingItem name="分值">
      <n-input-number
        size="small"
        v-model:value="data.props.score"
      ></n-input-number>
    </SettingItem>
    <SettingItem name="难度">
      <n-rate
        allow-half
        size="small"
        v-model:value="data.props.difficult"
      ></n-rate>
    </SettingItem>
    <SettingItem name="选项">
      <n-dynamic-input v-model:value="data.props.options" :on-create="onCreate">
        <template #default="{ value }">
          <n-input
            size="small"
            placeholder="请输入选项名称"
            v-model:value="value.label"
            type="text"
          />
        </template>
      </n-dynamic-input>
    </SettingItem>
    <SettingItem name="正确选项">
      <n-select
        size="small"
        :options="data.props.options"
        v-model:value="data.props.correctValue"
      ></n-select>
    </SettingItem>
    <SettingItem name="本题说明">
      <n-input
        type="textarea"
        size="small"
        placeholder="请输入本题说明,如不填写则不显示"
        v-model:value="data.props.tip"
      ></n-input>
    </SettingItem>
    <SettingItem name=""></SettingItem>
    <SettingItem name="备注类型">
      <n-select
        size="small"
        :options="descriptionTypes"
        v-model:value="data.props.descriptionType"
      ></n-select>
    </SettingItem>
    <CollapseItem v-if="data.props.descriptionType != 1" name="文本详情">
      <SettingItem name="提示词">
        <n-input
          size="small"
          placeholder="请输入提示词"
          v-model:value="data.props.descriptionTip"
        ></n-input>
      </SettingItem>
      <SettingItem name="不少于">
        <n-input-group size="small">
          <n-input-number
            size="small"
            v-model:value="data.props.descriptionTextMin"
            placeholder="请输入大小"
            button-placement="both"
          ></n-input-number>
          <n-input-group-label size="small">字</n-input-group-label>
        </n-input-group>
      </SettingItem>
      <SettingItem name="不超过">
        <n-input-group size="small">
          <n-input-number
            size="small"
            v-model:value="data.props.descriptionTextMax"
            placeholder="请输入大小"
            button-placement="both"
          ></n-input-number>
          <n-input-group-label size="small">字</n-input-group-label>
        </n-input-group>
      </SettingItem>
    </CollapseItem>
    <CollapseItem v-if="data.props.descriptionType != 0" name="附件详情">
      <!-- <n-input size="small" ></n-input> -->
      <SettingItem name="默认附件">
        <OssUpload
          v-model="data.props.defaultFiles"
          submitText="请上传"
        ></OssUpload>
      </SettingItem>
      <SettingItem name="附件类型">
        <n-select
          size="small"
          multiple
          :options="fileTypes"
          v-model:value="data.props.descriptionFileType"
        ></n-select>
      </SettingItem>

      <SettingItem name="附件大小">
        <n-input-group size="small">
          <n-input-number
            size="small"
            v-model:value="data.props.descriptionFileSize"
            placeholder="请输入文件大小"
            button-placement="both"
          ></n-input-number>
          <n-input-group-label size="small">MB</n-input-group-label>
        </n-input-group>
      </SettingItem>
    </CollapseItem>
  </div>
</template>

<script lang="ts" setup>
import { PropType, ref, onMounted } from "vue";
import SettingItem from "../../../editor/components/config-panel/components/item.vue";
import CollapseItem from "../../../editor/components/config-panel/components/collapse.vue";
import { v1 } from "uuid";
import { fileTypes } from "@/utils/constant";
import OssUpload from "@/components/upload/index.vue";
const descriptionTypes = ref([
  {
    label: "纯文本",
    value: 0,
  },
  {
    label: "纯文件",
    value: 1,
  },
  {
    label: "文本+文件",
    value: 2,
  },
]);
const props = defineProps({
  data: {
    type: Object as PropType<any>,
    default: () => {
      return {};
    },
  },
});
const onCreate = () => {
  return {
    label: "",
    value: v1(),
  };
};
onMounted(() => {
  if (!props.data.options) {
    props.data.options = [];
  }
});
</script>

<style lang="scss" scoped></style>
